import React, { useState, useEffect, Suspense, useMemo, useCallback } from 'react';
import './App.css';
import { Button, Toast, TabBar } from 'antd-mobile'
import { SearchOutline, EnvironmentOutline } from 'antd-mobile-icons'
import routes from './router';
import { Route, Routes, NavLink, useNavigate } from 'react-router-dom'
import { IRouter } from './router'
import { useLocation } from 'react-router-dom'
import API from './views/api/login';
import { useSelector } from 'react-redux'

function App() {
  const location = useLocation()
  const navigate = useNavigate()
  const { addressReducer } = useSelector((state: any) => state)
  const id = location.pathname.split('/')[2]
  const pathArr = ['/login', '/edit', `/topic/${id}`, '/order', '/address', '/set', '/fruit', '/coupon', '/total', '/map', '/pushAddress', '/search','/service','/pay','/paydone','/content']
  // console.log(location)
  // console.log(location.pathname.split('/')[1])
  const isLogin = useMemo(() => {
    return pathArr.some(item => item == location.pathname)
  }, [location.pathname])
  const [til, setTil] = useState('首页')
  // const changeTil = useMemo(()=>setTil(location.pathname.split('/')[1]),[til])
  const changeTil = () => {
    let result = routes.filter((item: IRouter) => item.path === location.pathname)
    if (result.length) {
      setTil(result[0].til)
    }
  }
  useEffect(() => {
    changeTil()
  }, [location.pathname])
  // console.log(til,'监听')
  return (
    <div className='quanju'>
        {
          location.pathname == '/' ? <header>
            <div className='location' onClick={()=>navigate('/map')}>
              <i><EnvironmentOutline /></i>
              {addressReducer.address}
            </div>
            <div className='div' onClick={()=>navigate('/search')}><SearchOutline /></div>
          </header> : (location.pathname == '/find' ? <header>
    <div></div>
    <h3>选购</h3>
    <div className='div' onClick={() => navigate('/search')}><SearchOutline /></div>
  </header> : location.pathname == '/shopCar' ? <header><h3>购物车</h3></header> : (location.pathname == '/my' ? <header><h3>我的</h3></header> : ""))
}
<main>
        <Suspense fallback={<div className='loading'><img src="https://www.yiluxb.cn/zb_users/upload/2022/10/202210201666263031223237.gif" alt="" /></div>}>
          <Routes>
      {
        routes.map((item: IRouter) => <Route key={item.path} path={item.path} element={<item.element></item.element>}></Route>)
      }
    </Routes>
  </Suspense>
</main>
{
  !isLogin && <footer>

    <ul>
      {
        routes.filter((item: IRouter) => !item.hidden).map((item: IRouter) =>
          <li
            key={item.path}>
            <NavLink to={item.path}><div onClick={() => setTil(item.til)} className={item.til == til ? 'actives' : ''}>
              {item.icon}
              <div>{item.til}</div>
            </div>
            </NavLink>
          </li>)
      }
    </ul>
  </footer>
}

    </div >
  );
}

export default App;
